<template>
	<view class="tab-bar">
		<view class="tab-item" v-for="(item, index) in tabItems" :key="index"
			:class="{ active: currentIndex === index }" @click="switchTab(index)">
			<uni-icons :type="item.icon" size="24" :color="currentIndex === index ? '#000':'#999'"></uni-icons>
			<text>{{ item.text }}</text>
			<view class="plus" v-if="item.isAdd">+</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabItems: [{
						icon: 'home',
						text: '首页'
					},
					{
						isAdd: true,
						text: ''
					},
					{
						icon: 'person',
						text: '我的'
					}
				]
			}
		},
		props: {
			currentIndex: {
				type: Number,
				default: 0
			}
		},
		methods: {
			switchTab(index) {
				if (index == this.currentIndex) return;
				if (index == 0) {
					uni.navigateTo({
						url: "/pages/index/index"
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: "/pages/profile/profile"
					})
				} else {
					let that = this;
					if (!uni.getStorageSync("userId")) {
						uni.showToast({
							icon: 'none',
							title: "请先登录",
							duration: 2000,
							success() {
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/profile/profile"
									});
								}, 2000); // 延迟3秒执行跳转
							}
						})
					} else {
						uni.navigateTo({
							url: "/pages/publish/publish"
						})
					}

				}
			}
		}
	}
</script>

<style>
	/* Tabbar样式 */
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #fff;
		display: flex;
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1rpx solid #eee;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #999;
		position: relative;
	}

	.tab-item.active {
		color: #333;
	}

	.tab-item text {
		cursor: pointer;
		margin-top: 4rpx;
	}

	/* 中间的加号按钮 */
	.plus {
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(to right, #ff6b6b, #ff4f4f);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 50rpx;
		color: #fff;
		margin-top: -30rpx;
		box-shadow: 0 2px 8px rgba(255, 75, 75, 0.3);
	}

	/* 为了防止内容被底部tabbar遮挡，给content-list添加底部内边距 */
	.content-list {
		padding-bottom: 120rpx;
	}

	/* 导航栏下的红线样式 */
	.nav-item .active-line {
		position: absolute;
		bottom: -6rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 30rpx;
		height: 4rpx;
		background-color: #ff4f4f;
		border-radius: 2rpx;
	}
</style>